<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 先准备一个容器 -->
    <div id="app">
      <button @click="fn">自杀</button>
      <input type="text" v-model="msg" />
      <p id="ceshi">{{msg}}</p>
    </div>
    <!-- 2. 引框架 -->
    <script src="./vue.js"></script>
    <script>
      // 初始化阶段只会执行一次 更新阶段会反复的执行
      // 3.初始化vue实例对象
      //   越早越好

      const vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          timer: null,
        },
        methods: {
          fn() {
            this.$destroy();
          },
        },
        created() {
          this.timer = setInterval(() => {
            console.log("定时器");
          }, 1000);
          document.onmousemove = function () {
            console.log("鼠标移动");
          };
        },
        beforeDestroy() {
          //   beforeDestroy 我们一般在这里面清理定时器 移除DOM事件 类似一个收尾工作
          console.log("销毁前");
          clearInterval(this.timer);
          document.onmousemove = null;
        },
        destroyed() {
          console.log("销毁后");
        },
      });
      //   3个阶段8个钩子函数
      // 初始化 beforeCreate created beforeMount mounted
      // 更新 beforeUpdate updated
      // 销毁 beforeDestroy destroyed
      //   平时经常用 created(发送ajax) mounted(操作DOM) beforeDestroy(清理工作 清定时器 清DOM事件)
      //   初始化 销毁只有一次
      //   更新有无数次

      //   选项对象
      // new Vue({
      //     el:'',//和视图关联
      //     data:{},//响应式数据
      //     methods:{},//方法
      //     computed:{},//计算属性 可以用来写总价 总数量 插值表达式太复杂了可以用计算属性替代 和methods的区别是有缓存
      //     watch:{},//侦听器 需要侦听一个响应式数据变化的时候 一般适合异步代码
      //     beforeCreate(){},
      //     created(){},
      //     beforeMount(){},
      //     mounted(){},
      //     beforeUpdate(){},
      //     updated(){},
      //     beforeDestroy(){},
      //     destroyed(){}
      // })
    </script>
  </body>
</html>
